<template>
  <el-container class="main_con" style="padding-bottom: 0px">
    <div class="setting">
      <div class="setting_body">
        <div class="conetnt edit_con">
          <div class="edit_content">
            <el-form size="small" label-width="100px" ref="itemForm" :model="obj" :rules="itemRules">
              <el-form-item label="直播类型">
                <el-radio-group v-model="obj.room_type">
                  <el-radio :label="0">手机直播</el-radio>
                  <el-radio :label="1">推流直播</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="直播间名称" prop="title"><el-input size="small" style="width: 300px;" v-model="obj.title"></el-input></el-form-item>
              <el-form-item label="主播名称" prop="anchor_name"><el-input size="small" style="width: 300px;" v-model="obj.anchor_name"></el-input></el-form-item>
              <el-form-item label="主播微信号" prop="anchor_wechat"><el-input size="small" style="width: 300px;" v-model="obj.anchor_wechat"></el-input></el-form-item>
              <el-form-item label="背景图" prop="cover_img">
                <div style="width: 100px; height: 100px"><Upload :tempUrl="obj.cover_img" @input="getImage($event, 'cover_img')"></Upload></div>
              </el-form-item>
              <el-form-item label="分享图" prop="share_img">
                <div style="width: 100px; height: 100px"><Upload :tempUrl="obj.share_img" @input="getImage($event, 'share_img')"></Upload></div>
              </el-form-item>
              <el-form-item label="直播时间" prop="times">
                <el-date-picker
                  value-format="yyyy-MM-dd HH:mm"
                  v-model="obj.times"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
                <div style="color: #909399; font-size: 12px">
                  开播时间需要在当前时间的10分钟后 并且 开始时间不能在 6 个月后,开播时间和结束时间间隔不得短于30分钟，不得超过24小时
                </div>
              </el-form-item>
              <el-form-item label="显示样式">
                <el-radio-group v-model="obj.screen_type">
                  <el-radio :label="1">横板</el-radio>
                  <el-radio :label="0">竖版</el-radio>
                </el-radio-group>
                <div style="color: #909399; font-size: 12px">横屏：视频宽高比为16:9、4:3、1.85:1 ；竖屏：视频宽高比为9:16、2:3</div>
              </el-form-item>
              <el-form-item label="直播点赞">
                <el-radio-group v-model="obj.close_like">
                  <el-radio :label="0">开启</el-radio>
                  <el-radio :label="1">关闭</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="直播评论">
                <el-radio-group v-model="obj.close_comment">
                  <el-radio :label="0">开启</el-radio>
                  <el-radio :label="1">关闭</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="直播卖货">
                <el-radio-group v-model="obj.close_goods">
                  <el-radio :label="0">开启</el-radio>
                  <el-radio :label="1">关闭</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="直播回放">
                <el-radio-group v-model="obj.close_replay">
                  <el-radio :label="0">开启</el-radio>
                  <el-radio :label="1">关闭</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="直播分享">
                <el-radio-group v-model="obj.close_share">
                  <el-radio :label="0">开启</el-radio>
                  <el-radio :label="1">关闭</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="官方收录">
                <el-radio-group v-model="obj.is_feeds_public">
                  <el-radio :label="1">开启</el-radio>
                  <el-radio :label="0">关闭</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="setting_bootom"><el-button v-has size="medium" type="primary" @click="saveData">保存数据</el-button></div>
    </div>
  </el-container>
</template>

<script>
import Upload from '@/components/Upload/SingleImage2';
import {addlive, getlive,editlive} from '@/api/mall/liver';
import {objextend} from '@/utils/index';

export default {
  data() {
    return {
      isLoading: false,
      iconshow: false,
      showSelect: false,
      selectMer: [],
      rk: 1,
      obj: {
        times: [],
        title: '', //	必传	string	直播间名字，最短3个汉字，最长17个汉字，1个汉字相当于2个字符
        cover_img: '', //	必传	string	背景图
        start_time: '', //	必传	string	直播计划开始时间（开播时间需要在当前时间的10分钟后 并且 开始时间不能在 6 个月后）
        end_time: '', //	必传	string	直播计划结束时间（开播时间和结束时间间隔不得短于30分钟，不得超过24小时）
        share_img: '', //	必传	string	直播间分享图，图片规则：建议像素800*640，大小不超过1M
        anchor_name: '', //	必传	string	主播名称
        anchor_wechat: '', //	必传	string	主播微信号
        room_type: 0, //	非必传	string	直播间类型 【1: 推流，0：手机直播】
        screen_type: 0, //	非必传	string	图片
        close_like: 1, //	非必传	string	是否关闭点赞 【0：开启，1：关闭】
        close_goods: 1, //	非必传	string	是否关闭货架 【0：开启，1：关闭】
        close_comment: 1, //	非必传	string	是否关闭评论 【0：开启，1：关闭】
        close_replay: 1, //	非必传	string	是否关闭回放 【0：开启，1：关闭】
        close_share: 1, //	Number	否	是否关闭分享 【0：开启，1：关闭】
        is_feeds_public: 1 //	非必传	string	是否开启官方收录 【1: 开启，0：关闭】，默认开启收录
      },

      itemRules: {
        title: [
          {
            required: true,
            message: '直播间名称必须填写'
          },
          {
            min: 3,
            max: 17,
            message: '长度在 3 到17 个字符',
            trigger: 'blur'
          }
        ],
        anchor_name: [
          {
            required: true,
            message: '主播名必须填写'
          }
        ],
        anchor_wechat: [
          {
            required: true,
            message: '主播微信号必须填写'
          }
        ],
        cover_img: [
          {
            required: true,
            message: '背景图必须上传'
          }
        ],
        share_img: [
          {
            required: true,
            message: '分享图必须上传'
          }
        ],
        times: [
          {
            required: true,
            message: '请选择直播时间'
          }
        ]
      }
    };
  },
  components: {
    Upload
  },
  mounted() {
    if (this.$route.query.id) {
      //编辑状态
      this.isEdit = true;
      this.id = this.$route.query.id;
      this.getdetail();
    }
  },
  methods: {
    //获取图片
    getImage(val, tag) {
      this.obj[tag] = val;
    },
    getdetail() {
      let data = {
        id: this.id
      };
      getlive(data).then(res => {
        let json = res.msg;
        json.times = [json.start_time, json.end_time];
        this.obj = objextend(this.obj, json);
        this.obj.id=json.id
        this.obj.room_id=json.room_id
      });
    },

    //保存数据
    saveData() {
      this.$refs.itemForm.validate(valid => {
        if (valid) {
          this.isLoading = true;
          this.obj.start_time = this.obj.times[0];
          this.obj.end_time = this.obj.times[1];
          if (this.obj.room_id) {
            //更新
            editlive(this.obj)
              .then(res => {
                this.isLoading = false;
                this.$message.success('保存成功');
                this.$router.push({
                  path: '/liver/list'
                });
              })
              .catch(e => {
                this.isLoading = false;
              });
          } else {
            //新增
            addlive(this.obj)
              .then(res => {
                this.isLoading = false;
                this.$message.success('保存成功');
                this.$router.push({
                  path: '/liver/list'
                });
              })
              .catch(e => {
                this.isLoading = false;
              });
          }
        } else {
          //校验没通过
          return false;
        }
      });
    },
    closePro() {
      this.showSelect = false;
    }
  }
};
</script>

<style lang="scss" scoped>
//覆盖样式
.main_con .edit_con .edit_content {
  border-bottom: 0;
}

.setting {
  background: #fff;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 110px);

  .setting_body {
    flex-grow: 1;
    overflow-y: auto;
    //padding-top: 20px;

    .setting_body_item {
      .header {
        background: #e0e3e8;
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        margin-top: 20px;
      }
    }
  }

  .setting_bootom {
    height: 60px;
    line-height: 60px;
    border-top: 1px solid #dcdfe6;
  }
}
/* //选择图标 */
.icon_box {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #dcdfe6;
  position: relative;

  .icon-abl-close {
    position: absolute;
    top: -6px;
    right: -9px;
    color: rgba(0, 0, 0, 0.3);
    font-size: 16px;
  }
  .noIcon {
    width: 60px;
    height: 60px;
    display: inline-block;
  }
  .iconfont {
    font-size: 30px;
  }
  &:hover {
    .choose_bar {
      display: block;
    }
  }

  .choose_bar {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    line-height: 18px;
    text-align: center;
    width: 100%;

    i.txt {
      display: inline-block;
      font-style: normal;
      -webkit-transform: scale(0.75);
      transform: scale(0.75);
      letter-spacing: 2px;
    }
  }
}
.configuration {
  .el-input {
    width: 120px;
    margin: 0px 5px;
  }
}
</style>
